Webブックマークをローカルファイルのデータベースから構築して表示する自作ツール。
旧題:Bookmarks.html(仮)
最初はcsvを使っていたが、今はDynalistに決まった書式(headingなど)で書いてエクスポートしたopmlファイルを読み込んでいる。
サンプル
Bookmark Viewer
関連記事
Screenshot
サンプルのScreenshot
動じないために。
Webブックマークをローカルファイルのデータベースから構築して表示する自作ツール。
旧題:Bookmarks.html(仮)
最初はcsvを使っていたが、今はDynalistに決まった書式(headingなど)で書いてエクスポートしたopmlファイルを読み込んでいる。
サンプル
Bookmark Viewer
関連記事
Screenshot
サンプルのScreenshot
Backlinks
他の「のらてつ製デジタルノートツール」カテゴリの語句
いよいよ具体的に作ったツールの話がメインになります。
今回は少し前の記事(前日譚②~JavaScriptを書けると何が嬉しいの?~(NTA-DIY:前日譚②~JavaScriptを書けると何が嬉しいの?~))で触れたブックマーク管理ツールの話です。
管理と言っても、まだツール上でデータを編集するわけではありません。とりあえずCSVファイルにデータを用意しておいて、それを使っていい感じの見た目を作ろう、というものです。ツールというよりはビューワと言った方が表現としては合っているかもしれません。
実際に作ったもの(のコードを今の書き方で綺麗にしたもの)をサンプルとして見れるようにしてみました。
tag,title,url,favicon,description
SNS,Twitter(@Foam_Crab),https://twitter.com/Foam_Crab,,
Writing,Noratetsu Lab,https://noratetsu.blogspot.com/,,メインのブログ
Scrapbox,Noratetsu's Room(のらてつ研究所),https://scrapbox.io/noratetsu/,https://gyazo.com/8e76071e5281e7396c84c83d32554939/thumb/1000,
必須なのは「tag」「title」「url」です。どこに配置するかを「tag」で決めています。どのtagがどのカラムになるかはJavaScriptのコード内で指定しています。
「favicon」はアイコンとして表示したい画像のURLです。省略すればデフォルトのfaviconを「http://www.google.com/s2/favicons?domain=${url}
」で取得して表示します。
「description」はそのページについてのメモです。どういうサイトだったか、何でログインするんだったか、といった情報を必要に応じて書いておきます。Webブラウザのブックマークは基本的にメモ欄がありませんが、メモできると「なんだったっけ」と考えるロスが減ります。
なぜこのようなツールを作ったかというと、個人的にWebブラウザのブックマーク機能のあのリスト形式が好きじゃないからです。具体的にどこがどう嫌かというのはズバッと言語化できないのですが(明確な理由があるものではないのだと思います)、嫌だという気持ちははっきりしていて、そのせいでブックマークをうまく使えない状態が長きにわたり続いていました。
フォルダ整理という形式がうまくいかなさの原因かなと思ったこともありましたが、多分問題はそこではなく、どういう見た目をしているかなのだと思います。早い話が、楽しいか楽しくないかの問題です。
ブックマーク機能を提供するサービスや拡張機能というのも世の中には色々ありますが、そういうのを試してみると、機能が大仰過ぎて面倒な気持ちがまさってしまいました。簡単さの面ではブラウザのブックマーク程度で良いのです。サッと見れるのが大事です。
ではどういうビューなら自分が納得するかと考えてみても、それは自明のことではなく、考え出すのにはそれなりに苦労しました。最終的に冒頭で貼ったサンプルのようになったのですが、多分自分以外の人には中途半端なデザインに見えるだろうと思います。私自身、理屈で考えていたらもっと違う形にしようとしたのではないかと思います。ですが、これでいいのです。イケてるかどうかは知りませんが、「認識するのが楽」なのがこの形なのです。
このブックマーク管理ツールはJavaScriptのありがたみを理解する上で大きな一歩となりました。そして当時「JavaScriptでできたら嬉しいこと」として唯一具体的に思い描けていたのがこの「CSVを元にHTML要素を作る」という処理です。
最初、このツール(というかビューワ)は内容を全部HTMLにベタ打ちして作っていました。一応ブックマークレットを使い、登録したいページで実行すれば必要なタグを全部つけた状態で一発コピーできるようにしていましたが、ただ貼り付けるのは簡単でも、並べ替えなどの操作は非常に面倒でした。そこで「データはデータで作って、自動でHTML化したい」という願望が生まれ、「そういうのこそJavaScriptってやつでできるんじゃあないのか」となったのです。
願望としてあったのはそれだけだったので、これを実現した時点でゴールに到達してしまったようなものでした。ノートテイキングアプリを自分で作ってしまう、なんてことはこの時点ではそれほど考えていなかったと思います。そこまでできると思っていなかったからです。何しろ何をどうしたらアプリケーションの体を成すのかわからなかったのです。
ですが、このビューワを作ったことにより、JavaScriptとはつまり何ができるものなのかということをイメージできるようになりました。これができるってことはじゃああれもできるんじゃないか、とアイデアが浮かぶようになり、それができたらじゃあこれ、これができたらじゃああれ、と飛び石を渡っているうちに可能性がどんどん広がっていったわけです。
コードの説明も書こうかと思いましたが、独学の我流でありオーソドックスな書き方になっているのかわからないのと、毎度言及していると大変過ぎて更新が捗らなくなることから、コードの詳細については説明を省略します。(質問を受けたら答えます)
コードは右クリック→「ページのソースを表示」を選択すると読めます。
ツールの挙動としては当時(つまり勉強開始二十日目くらい)から変えていませんが、コーディングは結構違っています。当時のコードを今見ると、知っているメソッド・書き方だけで頑張って作っているなと思いますが、工夫の積み重ねとは裏腹に、読むにあたっては何がなんだかわからないので、そのまま公開しない方が良いだろうと判断しました。
なおブックマークの管理のために別途CSVを編集するというのはあまり自然な流れではないので、半年くらい後に違うやり方に変えました。具体的には……とここで書こうかと思いましたが、それはいずれ記事にするのでお楽しみにということにします。
ところで、公開したサンプルは単にツールの様子を見せるために作ったものですが、個人サイトの一コンテンツとして置いておいてもいいかもと思いました。よく使う便利ツールのリンクなどを充実させると面白いかもしれないですね。
JavaScriptの勉強を始めておよそ三ヶ月になる(1/27スタート)。この間に自分のデジタルライフは大きく変わっていった。
まずHTML+CSS+JavaScriptの三要素を習得したことによって、ある程度実用的な情報管理ツールを作れるようになった。
現時点で形を成しているツール・サイトが六つある。それらについて書いていくが、ツール名が「~.html」となっているのは「名無し」と同じ意味。
①Bookmarks.html(ブラウザ上)
②Cards.html(ブラウザ上→Electron)
③Outline.html(ブラウザ上→Electron)
④Fusen.html(ブラウザ上→Electron)
⑤のらてつの茶の間(ミニブログサイト)
⑥Plane Outliner(ブラウザ上)
このような感じで、プログラミング経験値ほぼゼロの状態から三ヶ月間であれこれやってきた。今回は作ったものの紹介までにして、次の記事でこの三ヶ月で起きた変化などについて書いていくことにする。